<template>
    <ul id="bookList">
        <li class="book" v-for="(value, index) in bookList">
            <span>《{{ value.name }}》</span>
            <span>{{ value.author }}</span>
            <button @click="deleteBook(index)">删除</button>
        </li>
    </ul>
</template>

<script setup>
    import { ref } from 'vue'
    const bookList = ref([
        { name: '红楼梦', author: '曹雪芹'},
        { name: '西游记', author: '吴承恩'},
        { name: '水浒传', author: '施耐庵'},
        { name: '三国演义', author: '罗贯中'}
    ])

    const deleteBook = index => {
        const ret = window.confirm("确定删除吗？")
        if(ret) {
            bookList.value.splice(index, 1)
        }
    }
</script>

<style>
    #app {
        width: 400px;
        margin: 100px auto;
    }

    ul {
        list-style: none;
    }

    ul li {
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    }
</style>